<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8" />
    <title></title>
    <!-- CSS Rest -->
    <link rel="stylesheet" href="./normalize.css" type="text/css" />
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous" />

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <!-- 引入字体图标的文件-->
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="./index.css" type="text/css" media="" />
</head>

<body>
    <div class="figure">
        <!--播放器-->
        <figure>
            <!--  标题-->
            <figcaption id="figcaption">HTML5原生播放器</figcaption>
            <div class="palyer" onmouseover="showControls();" onmouseout="hideControls();">
                <video class="video">
            <source
              src="http://sf1-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/gongquhunjian_1080.min.mp4"
              type="video/mp4"
            />
          </video>
                <!-- 控制条-->
                <div class="controls" onmouseover="showControls();" onmouseout="hideControls();">
                    <!-- 播放暂停-->
                    <span class="glyphicon glyphicon-play" id="span"></span>
                    <div class="progress">
                        <!-- 当前进度-->
                        <div class="curr-progress"></div>
                    </div>
                    <!-- 时间-->
                    <div class="time">
                        <span class="curr-time">00:00:00</span>/<span class="total-time">00:00:00</span
              >
            </div>
            <div class="processing">
              <span class="glyphicon glyphicon-backward"></span>
                        <span class="glyphicon glyphicon-forward"></span>
                    </div>
                    <!-- 全屏-->
                    <span class="glyphicon glyphicon-fullscreen" id="full-screen"></span>
                </div>
                <!-- 播放器按钮框 -->
                <!-- <div id="btn_container">

                </div> -->
            </div>
        </figure>
    </div>
    <!-- note -->
    <!-- figure标签:
<figure> 元素代表一段独立的内容, 经常与说明（caption） <figcaption> 配合使用,
     并且作为一个独立的引用单元。当它属于主内容流（main flow）时，它的位置独立于主体。
    这个标签经常是在主文中引用的图片，插图，表格，代码段等等，当这部分转移到附录中或者其他页面时不会影响到主体。
-->

    <script>
        // 思路：
        /*
         * 1、点击按钮 实现播放暂停并且切换图标
         * 2、算出视频的总时显示出出来
         * 3、当视频播放的时候，进度条同步，当前时间同步
         * 4、点击实现全屏
         */

        //        获取需要的标签
        var video = document.querySelector("video");
        //          播放按钮
        var playBtn = document.querySelector("#span");
        //          当前进度条
        var currProgress = document.querySelector(".curr-progress");
        //          当前时间
        var currTime = document.querySelector(".curr-time");
        //          总时间
        var totalTime = document.querySelector(".total-time");
        //          后退
        var backward = document.querySelector(".glyphicon-backward");
        //          快进
        var forward = document.querySelector(".glyphicon-forward");
        //          全屏
        var extend = document.querySelector("#full-screen");

        var tTime = 0;

        //         1、点击按钮 实现播放暂停并且切换图标

        playBtn.onclick = function() {
            //               如果视频播放 就暂停，如果暂停 就播放
            if (video.paused) {
                //                   播放
                video.play();
                //切换图标
                playBtn.className = "glyphicon glyphicon-pause";
                // this.classList.remove('glyphicon glyphicon-play');
                // this.classList.add('glyphicon glyphicon-pause');
            } else {
                //                   暂停
                video.pause();
                //                   切换图标
                playBtn.className = "glyphicon glyphicon-play";
                // this.classList.remove('glyphicon glyphicon-pause');
                // this.classList.add('icon-play');
            }
        };

        //        2、算出视频的总时显示出出来
        //        当时加载完成后的事件，视频能播放的时候
        video.oncanplay = function() {
            //             获取视频总时长
            tTime = video.duration;
            // console.log(tTime);

            //          将总秒数 转换成 时分秒的格式：00：00:00
            //            小时
            var h = Math.floor(tTime / 3600);
            //            分钟
            var m = Math.floor((tTime % 3600) / 60);
            //            秒
            var s = Math.floor(tTime % 60);

            //            console.log(h);
            //            console.log(m);
            //            console.log(s);

            //            把数据格式转成 00:00：00
            h = h >= 10 ? h : "0" + h;
            m = m >= 10 ? m : "0" + m;
            s = s >= 10 ? s : "0" + s;

            // console.log(h);
            // console.log(m);
            // console.log(s);
            //            显示出来
            totalTime.innerHTML = h + ":" + m + ":" + s;
        };
        //   * 3、当视频播放的时候，进度条同步，当前时间同步
        //         当时当前时间更新的时候触发
        video.ontimeupdate = function() {
            //            获取视频当前播放的时间
            // console.log(video.currentTime);
            //            当前播放时间
            var cTime = video.currentTime;
            //           把格式转成00:00:00

            var h = Math.floor(cTime / 3600);
            //            分钟
            var m = Math.floor((cTime % 3600) / 60);
            //            秒
            var s = Math.floor(cTime % 60);

            //            把数据格式转成 00:00：00
            h = h >= 10 ? h : "0" + h;
            m = m >= 10 ? m : "0" + m;
            s = s >= 10 ? s : "0" + s;

            //            显示出当前时间
            currTime.innerHTML = h + ":" + m + ":" + s;

            //            改变进度条的宽度： 当前时间/总时间
            var value = cTime / tTime;

            currProgress.style.width = value * 100 + "%";
        };

        //        后退
        backward.onclick = function() {
            var currTime = video.currentTime - 5;
            // console.log(currTime);
            video.currentTime = currTime;
        };

        //        快进
        forward.onclick = function() {
            var currTime = video.currentTime + 5;
            // console.log(currTime);
            video.currentTime = currTime;
        };

        //        全屏
        extend.onclick = function() {
            //            全屏的h5代码
            video.webkitRequestFullScreen();
        };

        function showControls() {
            const control = document.querySelector(".controls");
            control.style.display = "block";
        }

        function hideControls() {
            const control = document.querySelector(".controls");
            control.style.display = "none";
        }
    </script>
</body>

</html>